<template>
  <div>
    <el-dropdown ref="dropTree" trigger="click" placement="bottom-start">
      <div class="selectTreeWrapper" :style="{width:treeWidth}">
        <span v-if="checkList.length==0" class="placeholder">请选择部门</span>
        <div v-for="(item,index) in checkList" :key="index" class="checkDiv">
          <span>{{ item.name }}</span>
          <i class="st_close_icon el-icon-close" @click.stop="delElement(index)" />
        </div>
        <i :class="[isShow?'el-icon-caret-top':'el-icon-caret-bottom']" />
      </div>
      <el-dropdown-menu slot="dropdown" :style="{width:treeWidth}">
        <el-tree
          ref="selectTree"
          class="selectTree"
          :data="treeData"
          :props="treeProps"
          show-checkbox
          node-key="id"
          @check="checkTree"
        />
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import treeUtils from '@/utils/treeUtils.js'
export default {
  props: {
    treeWidth: {
      type: String,
      default: ''
    },
    treeProps: {
      type: Object,
      default: () => {
        return {}
      }
    },
    treeData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      treeNodes: [],
      checkList: [],
      checkIdList: [],
      isShow: false
    }
  },
  created() {
    treeUtils.toTable(this.treeData, this.treeNodes)
  },
  methods: {
    // 关闭表单时，用于清空数据
    clearData() {
      this.checkList = []
      this.checkIdList = []
      this.$refs.selectTree.setCheckedKeys([])
    },
    // 编辑时，设置数据
    setData(array) {
      this.checkList = treeUtils.findNodeByKey(array, this.treeNodes, 'id')
      this.checkIdList = array
      this.$refs.selectTree.setCheckedKeys(array)
    },
    // 勾选树触发的方法，用于设置input里的文字方块
    checkTree(data, check) {
      this.checkList = []
      this.checkIdList = []
      const nodes = check.checkedNodes
      const cList = check.checkedKeys
      nodes.forEach(item => {
        if (cList.indexOf(item.parentId) === -1) {
          this.checkList.push(item)
        }
      })
      this.checkList.forEach(item => {
        this.checkIdList.push(item.id)
      })
    },
    // 用于删除文字方块，并更新数据与tree
    delElement(index) {
      this.checkList.splice(index, 1)
      this.checkIdList.splice(index, 1)
      this.$refs.selectTree.setCheckedKeys(this.checkIdList)
    }
  }
}
</script>
<style lang="scss">
.selectTreeWrapper {
  position: relative;
  min-height: 32px;
  padding: 0 30px 0 10px;
  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid #dbdbdb;
  color: #333;
  cursor: pointer;
  .checkDiv {
    display: inline-block;
    height: 24px;
    line-height: 24px;
    margin: 4px 10px 4px 0;
    padding: 0 10px;
    box-sizing: border-box;
    border-radius: 4px;
    border: 1px solid #ceab70;
    background: #ffffff;
    color: #ceab70;
    font-size: 12px;
    .st_close_icon {
      font-size: 8px;
      color: #ceab70;
    }
  }
  .checkDiv:hover {
    background: #ceab70;
    color: #ffffff;
    .st_close_icon {
      color: #ffffff;
    }
  }
  > i {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    color: #a8a8aa;
  }
  .placeholder {
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    color: #a8a8aa;
  }
}
.selectTree {
  max-height: 300px;
  overflow: auto;
}
</style>
